import Base from "../Base.js";
import moviesApi from "../../api/movies.js";
import cinemasApi from "../../api/cinemas.js";
import theatersApi from "../../api/theaters.js";
import schedulesApi from "../../api/schedules.js";

export default class extends Base {
    constructor(props) {
        super(props);
        this.data = JSON.parse(sessionStorage.getItem("schedule"));
        this.schedule = {
            _id: this.data._id,
            movieId: this.data.movieId._id,
            cinemasId: this.data.cinemasId._id,
            theaterId: this.data.theaterId._id,
            showTime: this.data.showTime,
            price: this.data.price,
        };
    }
    handle() {
        layui.form.on('select(cinema)', async (data) => {
            this.schedule.cinemasId = data.value;
            await this.getTheaters();
            layui.form.render();
        });
        $("#updata").on("click", async e => {
            this.schedule.movieId = this.movieSelect.val();
            this.schedule.theaterId = this.theaterSelect.val();
            this.schedule.price = this.priceInput.val();
            const data = await schedulesApi.updata(this.schedule);
            data ? layui.layer.msg("修改成功") : layui.layer.msg("修改失败");
            location.hash = "#/info/schedules";
        })
    }
    render() {
        this.el.html(`
            <h1 style="margin: 0 0 20px 110px;">修改排片</h1>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">电影</label>
                    <div class="layui-input-block" style="width: 200px;">
                        <select name="movie" lay-verify="required" lay-filter="movie">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">影院</label>
                    <div class="layui-input-block" style="width: 200px;">
                        <select name="cinema" lay-verify="required" lay-filter="cinema">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">影厅</label>
                    <div class="layui-input-block" style="width: 200px;">
                        <select name="theater" lay-verify="required" lay-filter="theater">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="date" placeholder="yyyy-MM-dd" style="width: 200px;">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" required lay-verify="required" autocomplete="off"
                        class="layui-input" style="width: 200px;" id="price" value="${this.schedule.price}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" value="修改" class="layui-btn" id="updata">
                        <input type="reset" value="重置" class="layui-btn">
                    </div>
                </div>
            </form>
        `);
        this.movieSelect = $("select[name=movie]");
        this.cinemaSelect = $("select[name=cinema]");
        this.theaterSelect = $("select[name=theater]");
        this.priceInput = $("#price");
        layui.form.render();
        //常规用法
        layui.laydate.render({
            elem: '#date'
            , type: "datetime"
            , min: 0
            , value: this.schedule.showTime
            , done: (value, date, endDate) => {
                this.schedule.showTime = value;//得到日期生成的值，如：2017-08-18
            }
        });
    }
    async mounted() {
        await this.getMovies();
        await this.getCinemas();
        await this.getTheaters();
        layui.form.render();
    }
    async getMovies() {
        const movies = await moviesApi.getAll();
        this.movieSelect.html(`
            ${movies.map(item => {
            return `<option value=${item._id}>${item.cname}</option>`
        }).join("")
            }
        `);
        this.movieSelect.val(this.schedule.movieId);
    }
    async getCinemas() {
        const cinemas = await cinemasApi.getAll();
        this.cinemaSelect.html(`
            ${cinemas.map(item => {
            return `<option value=${item._id}>${item.name}</option>`
        }).join("")
            }
        `);
        this.cinemaSelect.val(this.schedule.cinemasId);
    }
    async getTheaters() {
        const theaters = await theatersApi.getByCinemasId(this.schedule.cinemasId);
        this.theaterSelect.html(`
            ${theaters.map(item => {
            return `<option value=${item._id}>${item.name}</option>`
        }).join("")
            }
        `);
        this.theaterSelect.val(this.schedule.theaterId);
    }
}